.tower-box {
  position: relative;
  width: 400px;
  height: 60vh;
  border: 3px solid $--color-white;
  background: $--color-black-half-quarter;
  border-radius: $--border-radius;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tower-list {
    flex: 1;
    width: 380px;
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .list-scroll-content {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      .list-item {
        cursor: pointer;
        color: $--color-white;
        margin: 5px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        &::after,
        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 10%,
            rgba(35, 198, 200, 0.3) 20%,
            rgba(35, 198, 200, 0.4) 30%,
            rgba(35, 198, 200, 0.5) 40%,
            rgba(35, 198, 200, 0.8) 50%,
            rgba(35, 198, 200, 0.5) 60%,
            rgba(35, 198, 200, 0.4) 70%,
            rgba(35, 198, 200, 0.3) 80%,
            rgba(0, 0, 0, 0) 90%,
            rgba(0, 0, 0, 0) 100%
          );
        }
        &.active{
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 10%,
            rgba(35, 198, 100, 0.3) 20%,
            rgba(35, 198, 100, 0.4) 30%,
            rgba(35, 198, 100, 0.5) 40%,
            rgba(35, 198, 100, 0.8) 50%,
            rgba(35, 198, 100, 0.5) 60%,
            rgba(35, 198, 100, 0.4) 70%,
            rgba(35, 198, 100, 0.3) 80%,
            rgba(0, 0, 0, 0) 90%,
            rgba(0, 0, 0, 0) 100%
          );
        }
        &:hover{
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 10%,
            rgba(35, 198, 200, 0.3) 20%,
            rgba(35, 198, 200, 0.4) 30%,
            rgba(35, 198, 200, 0.5) 40%,
            rgba(35, 198, 200, 0.8) 50%,
            rgba(35, 198, 200, 0.5) 60%,
            rgba(35, 198, 200, 0.4) 70%,
            rgba(35, 198, 200, 0.3) 80%,
            rgba(0, 0, 0, 0) 90%,
            rgba(0, 0, 0, 0) 100%
          );
        }
        &:active{
          opacity: 0.8;
        }
        
      }
    }
  }
  .tower-operate {
    height: 60px;
    width: 100%;
    border-top: 3px solid $--color-white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    & > [class^="button-"] {
      margin-left: 0;
    }
  }
}